<div ng-init="init();" class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header" style="width: 100%; height: 100%;">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="'dashboard-QT02.spcInfo.title' | translate" style="color: #db4b3c;"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="kmi-list column-selector" column-selector-id="QT02_SPCInfo_detail">
                <div class="kmi-list__header">
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QCFORMNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QCFORMNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column1' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QCFORMNO_show">
                            <input ng-model="dialog.spc_filter.QCFORMNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QCFORMNO_show"
                                ng-click="QCFORMNO_show = false; dialog.spc_filter.QCFORMNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="LOTNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="LOTNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column2' | translate"></label>
                        </div>
                        <div class="filter" ng-show="LOTNO_show">
                            <input ng-model="dialog.spc_filter.LOTNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="LOTNO_show"
                                ng-click="LOTNO_show = false; dialog.spc_filter.LOTNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="OPNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="OPNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column3' | translate"></label>
                        </div>
                        <div class="filter" ng-show="OPNO_show">
                            <input ng-model="dialog.spc_filter.OPNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="OPNO_show"
                               ng-click="OPNO_show = false; dialog.spc_filter.OPNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="ITEMNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="ITEMNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column4' | translate"></label>
                        </div>
                        <div class="filter" ng-show="ITEMNO_show">
                            <input ng-model="dialog.spc_filter.ITEMNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="ITEMNO_show"
                                ng-click="ITEMNO_show = false; dialog.spc_filter.ITEMNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="ITEMTYPE_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="ITEMTYPE_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column5' | translate"></label>
                        </div>
                        <div class="filter" ng-show="ITEMTYPE_show">
                            <input ng-model="dialog.spc_filter.ITEMTYPE" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="ITEMTYPE_show"
                                ng-click="ITEMTYPE_show = false; dialog.spc_filter.ITEMTYPE=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QCformTYPE_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QCformTYPE_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column6' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QCformTYPE_show">
                            <input ng-model="dialog.spc_filter.QCformTYPE" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QCformTYPE_show"
                               ng-click="QCformTYPE_show = false; dialog.spc_filter.QCformTYPE=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="INSPTYPE_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="INSPTYPE_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column7' | translate"></label>
                        </div>
                        <div class="filter" ng-show="INSPTYPE_show">
                            <input ng-model="dialog.spc_filter.INSPTYPE" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="INSPTYPE_show"
                                ng-click="INSPTYPE_show = false; dialog.spc_filter.INSPTYPE=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QTY_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QTY_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column8' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QTY_show">
                            <input ng-model="dialog.spc_filter.QTY" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QTY_show"
                                ng-click="QTY_show = false; dialog.spc_filter.QTY=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QCITEMNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QCITEMNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column9' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QCITEMNO_show">
                            <input ng-model="dialog.spc_filter.QCITEMNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QCITEMNO_show"
                                ng-click="QCITEMNO_show = false; dialog.spc_filter.QCITEMNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QCITEMNAME_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QCITEMNAME_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column10' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QCITEMNAME_show">
                            <input ng-model="dialog.spc_filter.QCITEMNAME" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QCITEMNAME_show"
                               ng-click="QCITEMNAME_show = false; dialog.spc_filter.QCITEMNAME=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="QCITEMTYPE_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="QCITEMTYPE_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column11' | translate"></label>
                        </div>
                        <div class="filter" ng-show="QCITEMTYPE_show">
                            <input ng-model="dialog.spc_filter.QCITEMTYPE" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="QCITEMTYPE_show"
                               ng-click="QCITEMTYPE_show = false; dialog.spc_filter.QCITEMTYPE=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="RESULT_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="RESULT_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column12' | translate"></label>
                        </div>
                        <div class="filter" ng-show="RESULT_show">
                            <input ng-model="dialog.spc_filter.RESULT" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="RESULT_show"
                               ng-click="RESULT_show = false; dialog.spc_filter.RESULT=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="ERFNO_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="ERFNO_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column13' | translate"></label>
                        </div>
                        <div class="filter" ng-show="ERFNO_show">
                            <input ng-model="dialog.spc_filter.ERFNO" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="ERFNO_show"
                               ng-click="ERFNO_show = false; dialog.spc_filter.ERFNO=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="TESTVALUE_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="TESTVALUE_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column14' | translate"></label>
                        </div>
                        <div class="filter" ng-show="TESTVALUE_show">
                            <input ng-model="dialog.spc_filter.TESTVALUE" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="TESTVALUE_show"
                               ng-click="TESTVALUE_show = false; dialog.spc_filter.TESTVALUE=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="SAMPLEQTY_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="SAMPLEQTY_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column15' | translate"></label>
                        </div>
                        <div class="filter" ng-show="SAMPLEQTY_show">
                            <input ng-model="dialog.spc_filter.SAMPLEQTY" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="SAMPLEQTY_show"
                               ng-click="SAMPLEQTY_show = false; dialog.spc_filter.SAMPLEQTY=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="GOODQTY_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="GOODQTY_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column16' | translate"></label>
                        </div>
                        <div class="filter" ng-show="GOODQTY_show">
                            <input ng-model="dialog.spc_filter.GOODQTY" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="GOODQTY_show"
                               ng-click="GOODQTY_show = false; dialog.spc_filter.GOODQTY=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="SCRAPQTY_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="SCRAPQTY_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column17' | translate"></label>
                        </div>
                        <div class="filter" ng-show="SCRAPQTY_show">
                            <input ng-model="dialog.spc_filter.SCRAPQTY" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="SCRAPQTY_show"
                               ng-click="SCRAPQTY_show = false; dialog.spc_filter.SCRAPQTY=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls " style="flex:1;">
                        <div class="order" ng-hide="DEFECTQTY_show">
                            <i class="material-icons search" style="z-index:1;" ng-click="DEFECTQTY_show = true">search</i>
                            <label ng-bind="'dashboard-QT02.spcInfo.showGrid.column18' | translate"></label>
                        </div>
                        <div class="filter" ng-show="DEFECTQTY_show">
                            <input ng-model="dialog.spc_filter.DEFECTQTY" style="margin-top: 4px;font-size: 13px;">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 8px;" ng-show="DEFECTQTY_show"
                               ng-click="DEFECTQTY_show = false; dialog.spc_filter.DEFECTQTY=''">clear</i>
                        </div>
                    </div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.getPages(dialog.moduleData, dialog.List_PageConfig, dialog.spc_filter) track by $index">
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QCFORMNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.LOTNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.OPNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.ITEMNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.ITEMTYPE"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QCformTYPE"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.INSPTYPE"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QTY"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QCITEMNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QCITEMNAME"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.QCITEMTYPE"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.RESULT"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.ERFNO"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.TESTVALUE"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.SAMPLEQTY"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.GOODQTY"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.SCRAPQTY"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.DEFECTQTY"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="page-icon">
                <img src="image/icons/dropleft.png"></img>
                <div class="kmi-can-click"  ng-click="dialog.List_PageConfig.page = (dialog.List_PageConfig.page-1<0?0:dialog.List_PageConfig.page-1);"></div>
            </div>
            <label ng-bind="(dialog.List_PageConfig.page +1)+' / '+dialog.List_PageConfig.total_page"></label>
            <div class="page-icon">
                <img src="image/icons/dropright.png"></img>
                <div class="kmi-can-click"  ng-click="dialog.List_PageConfig.page = (dialog.List_PageConfig.page+1>(dialog.List_PageConfig.total_page-1)?(dialog.List_PageConfig.total_page-1):dialog.List_PageConfig.page+1);"></div>
            </div>
        </div>
        <div class="btn-panel" style="display: flex; justify-content: center;">
            <div class="kmi-button kmi-button-confrim btn-confirm" ng-click="dialog.back();" style="width:100px">
                <label ng-bind="'common.btn.close'|translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
    </div>
</div>
